<template>
	<div>
		<div id="audition_syllabus" class="dialog animated"
			:class="[open? 'fadeIn':'fadeOut', subShow? 'transparent':'']" v-show="show">
			<div class="panel animated" :class="open? 'zoomIn':''">
				<div class="title">
					课节设置
					<div class="close" @click="cancel()"></div>
				</div>
				<div class="form">
					<div style="overflow: hidden;">
						<div class="synchro_btn" @click="synchro()">课件同步</div>
					</div>
					<table class="table" cellspacing="0">
						<thead class="thead">
							<tr>
								<td style="width: 1.5rem;">课节序号</td>
								<td style="width: 2.5rem;">课节名称</td>
								<td style="width: 1.5rem;">上课时间</td>
								<td style="width: 1.5rem;">课节资源</td>
								<td style="width: 1.5rem;">教参资源</td>
								<!--<td style="width: 3rem;">课节资源</td>-->
							</tr>
						</thead>
						<tbody class="tbody">
							<tr>
								<td>1次课</td>
								<td>
									{{audition.className}}
									<!--<template v-if="nameStatus == 1">
										<span class="span_btn" @click="nameStatus = 2">添加</span>  
									</template>
									
									<template v-if="nameStatus==2">
										<div style="position: relative;top: 0.01rem;">
											<el-input v-model="syllabusName" style="width: 1.6rem;"></el-input>
											&nbsp;<span class="span_btn" @click="nameStatus = 3">保存</span>
										</div>
									</template>
									
									<template v-if="nameStatus==3">
										<div style="position: relative;top: 0.01rem;">
											<span>{{syllabusName}}</span>
											&nbsp;<span class="span_btn" @click="nameStatus = 2">修改</span>
										</div>
									</template>-->
								</td>
			  					<td>多个时间段</td>
			  					<td>
			  						<span class="span_btn" @click="openResource(audition, 1)">查看资源</span>
			  					</td>
			  					<td>
			  						<span class="span_btn" @click="openResource(audition, 2)">查看资源</span>
			  					</td>
			  					<!--<td>
			  						<div class="file_div">
				  						<template v-for="item in fileList">
				  							{{item.fileName}}
					  						&nbsp;
					  						<span class="span_btn" @click="deleteFile(item.classFileId)">删除</span>
					  						<br/>
				  						</template>
				  						<span class="span_btn" @click="openSelect">上传资源</span>
				  						<input type="file" id="talkFile" hidden />
			  						</div>
			  					</td>-->
			  				</tr>
						</tbody>
					</table>
				</div>
			</div>
			
		</div>
		
		<!--上传资源弹窗-->
		<div id="audition_syllabus_upload" class="dialog animated" v-show="subShow">
			<div class="panel animated" :class="subOpen? 'zoomIn':''">
				<div class="title">
					上传资源
					<div class="close" @click="closeSelect()"></div>
				</div>
				
				<div class="tab_div">
					<div class="tab" :class="tab==1?'tab_active':''" @click="tab=1">资源上传</div>
					<div class="tab" :class="tab==2?'tab_active':''" @click="tab=2">H5课件URL</div>
				</div>
				
				<div class="upload_div" v-if="tab==1">
					<el-input v-model="fileName" style="margin-top: 0.45rem;width: 3.08rem;" placeholder="请选择文件" readonly></el-input>
					<div class="select_btn" @click="selectFile()">选择文件</div>
				</div>
				
				<div class="upload_div" v-if="tab==2">
					<el-input v-model="name" style="margin-top: 0.3rem;" maxLength="100" placeholder="请输入H5课件名称"></el-input>
					<el-input v-model="fileurl" id="fileurl" style="margin-top: 0.15rem;" maxLength="200" placeholder="请输入H5课件URL"></el-input>
				</div>
				
				<div class="btn_div">
					<div class="btn_sure" @click="sureUpload()">确 认</div>
					<div class="btn_cancel" @click="closeSelect()">取 消</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
var vm,dict,$file;
export default {
	data : function() {
		return {
			show : false,
			open : false,
			subShow : false,
			subOpen : false,
			syllabusName : null,
			nameStatus : 1,
			audition : {},
			fileList : null,
			talkConfig : null,
			fileId : null,
			tab : 1, //1:文件上传,2: 文件url
			fileName : "", //上传文件名
			fileurl : "", //文件地址
			name: "", //文件名称
			loading : null,
			
		}
	},
	methods : {
		init : function(audition) {
			vm.show = true;
			vm.open = true;
			
			vm.audition = audition;
			vm.syllabusName = "";
			
			if(!vm.talkConfig){
				//获取拓课云配置
				api.getTalkYunConfig().then(function(data){
					vm.talkConfig = data.info;
				});
			}
			//vm.search();
		},
		search : function() {
			var param = {
				classId : vm.audition.classId,
				classType : 2
			};
			api.auditionFileList(param).then(function(data) {
				vm.fileList = data.list;
			});
		},
		openResource : function(audition, index) {
			var routeData = router.resolve({ 
				path: vm.$store.state.permit["44"].path, 
				query: {classSyllabusId: audition.libraryCourseSyllabusId, index: index}
			});
   			window.open(routeData.href);
		},
		deleteFile : function(id) {
			api.auditionFileDelete({classFileId : id}).then(function() {
				vm.search();
			});
		},
		cancel : function() {
			vm.open = false;
			setTimeout(function() {
				vm.show = false;
			},500);
		},
		synchro :function() {
			let param = {
				classId : vm.audition.classId,
				isTrialClass : 1
			}
			api.auditionResourceRefresh(param).then(function(data) {
				tool.message({message: "同步资源成功", type: "success", showClose: true});
			});
		},
		openSelect : function() {
			vm.subShow = true;
			vm.subOpen = true;
			//初始化参数
			vm.fileName = "";
			vm.fileurl = "";
			vm.name = "";
		},
		closeSelect : function() {
			vm.subOpen = false;
			vm.subShow = false;
		},
		selectFile : function() {
			$file.click();
		},
		sureUpload : function() {
			
			//请求参数
			var param = new FormData(); 
            param.append('key', vm.talkConfig.key);//企业ID
           
            //请求配置
            let config = { 
				headers: { "Content-Type": "multipart/form-data"},
				baseURL: vm.talkConfig.url,
				withCredentials: false
			}
			
			//上传文件
			if(vm.tab == 1) {
				//没有文件,直接结束
				let file = $file[0].files[0];
				if(!file) {
					tool.message({message: "请先选择文件", type: 'warning'});
					return;
				}
				param.append('file',file);
				param.append('conversion', 1);//是否转换
	            param.append('isopen', 1);//是否公开文档		      
	            param.append('dynamicppt', 0);//0是否是非动态ppt 1是动态ppt 
	            vm.loading = tool.loading({text: "上传中", background: "rgba(0,0,0,0)"});
				//发起请求
				let req = api.uploadTalkCloud(param, config);
				vm.uploadFile(req);
			}
			//H5课节URL
			if(vm.tab == 2) {
				//url没填,直接返回
				if(!vm.fileurl) {
					tool.message({message: "H5课节URL不可为空", type: 'warning'});
					$("#fileurl").focus();
					return;
				}
				
				param.append('fileurl', vm.fileurl);
				param.append('name', vm.name);
				vm.loading = tool.loading({text: "上传中", background: "rgba(0,0,0,0)"});
				//发起请求
				let req = api.uploadurlTalkCloud(param, config);
				vm.uploadFile(req);
			}
		},
		uploadFile : function(req) {
           
			req.then(function(data){		
				tool.message({message: "上传资源成功", type: 'success'});
				//记录文件id
				vm.fileId = data.fileid;
				var param;
				//文件上传的参数
				if(vm.tab == 1) {
					let name = data.filename;
					param = {
						classId : vm.audition.classId,
						classType : 2,
						fileId : data.fileid,
						fileName : name,
						filePath : data.downloadpath,
						fileType : name.substring(name.lastIndexOf(".")+1, name.length),
						fileSize : data.size
					}
				}
				//H5课节的参数
				if(vm.tab == 2) {
					param = {
						classId : vm.audition.classId,
						classType : 2,
						fileId : data.fileid,
						fileName : vm.name,
						filePath : vm.fileurl,
					}
				}
				//将资源绑定到试听班级中
				return api.auditionFileAdd(param);
			}).then(function(data) {
				vm.search();
				
				//查找试听班级的所有课节
				return api.auditionSyllabus({classId : vm.audition.classId});
			}).then(function(data) {
				let idList = [];
				//遍历已经创建网络教室的课节
				data.list.forEach(function(item) {
					if(item.talkcloudRoomId) {
						idList.push(item.classSyllabusId);
					}
				})
				//如果没有课节创建网络教室,直接结束
				if(idList.length == 0) {
					Promise.reject("");
					return;
				}
				//绑定课节和资源
				let p2 = {
					classType : 2,
					classSyllabusIdList : idList,
					talkcloudClassFileEntityList : [{fileId : vm.fileId}]
				};
				return api.auditionSyllabusFileBind(p2);
				
			}).then(function(data) {
				vm.closeSelect();
				vm.loading.close();
			}).catch(function(data) {
				vm.loading.close();
			});
			
		}
	},
	mounted : function() {
		$file = $("#talkFile");
		$file.change(function() {
			//获取选中的文件,有的话则记录文件名
			var f = $file[0].files[0];
			vm.fileName = (f? f.name : "");
		});
			
		//vm.init({"classId":"1154639680981975042","classNo":"20190726726XSCS2","className":"726线上测试2","coursePackageId":"1152425842668740611","coursePackageName":"小小书法家","photo":"","totalCourseHour":50,"oneCourseHour":1,"oneCourseHourMinute":50,"recruitNum":50,"startTime":"2019-07-26 00:00","endTime":"2019-08-30 00:00","teacherUserId":"1146251414579093505","assisUserId":"1146611851405041666","classRoomId":"0","classStatusMode":1,"classTypeMode":2,"classTeachingMode":1,"classReplayMode":1,"syllabusStartNum":1,"syllabusEndNum":1,"feiboClassOrderId":null,"campusId":"1130711493383290882","createUserId":"1133708803179556866","createUserName":"余小获","createTime":"2019-07-26 14:28","updateTime":"2019-07-26 14:28","updateUserId":"1133708803179556866","isDelete":"0","courseName":"小小书法家","courseId":"1152425842630991874","teacherUserName":"dks","assisUserName":"Amy2","classRoomName":null,"studentNum":0,"subjectId":"1135436108592795650","subjectName":null,"courseType":3,"courseTypeName":null,"courseMode":1,"nearTrialClassSyllabus":null,"classOrTrialClass":2,"foreignTeacherType":null,"foreignTeacherPrice":null,"feiboSyllabusOrderNum":null});
	
	},
	created : function() {
		vm = this;
		dict = tool.getItem(lsKey.dict,true);
		
//		vm.init({"classId":"1161207327223730178","classNo":"20190813SDF","className":"水电费","coursePackageId":"1138721993789624322","coursePackageName":"语言艺术","photo":"","totalCourseHour":1,"oneCourseHour":1,"oneCourseHourMinute":60,"recruitNum":50,"startTime":"2019-08-13 00:00","endTime":"2019-09-24 00:00","teacherUserId":"1156818446604918785","assisUserId":"1156818446604918785","classRoomId":"0","classStatusMode":1,"classTypeMode":2,"classTeachingMode":1,"classReplayMode":1,"syllabusStartNum":1,"syllabusEndNum":1,"feiboClassOrderId":null,"foreignTeacherType":null,"campusId":"1136194970676387841","createUserId":"1157110086460530689","createUserName":"余校区管理员","createTime":"2019-08-13 17:26","updateTime":"2019-08-13 17:26","updateUserId":"1157110086460530689","isDelete":"0","courseName":"语言艺术","courseId":"1136201103042482177","teacherUserName":"gcqTest","assisUserName":"gcqTest","classRoomName":null,"studentNum":0,"subjectId":"1135436108592795650","subjectName":"语文","courseType":3,"courseTypeName":"课时","courseMode":1,"nearTrialClassSyllabus":{"classSyllabusId":"1162190144510472194","classId":"1161207327223730178","coursePackageId":"1138721993789624322","courseId":"1136201103042482177","classSyllabusName":null,"startTime":"2019-08-16 10:35","endTime":"2019-08-16 11:35","classHour":1,"teacherUserId":"1156818446604918785","assisUserId":"1156818446604918785","classroomId":"1234","attendMode":2,"orderBy":1,"courseName":"语言艺术","teacherUserName":"gcqTest","assisUserName":"gcqTest","classroomName":null,"attendModeName":"未上课","className":"水电费","classCourseCount":1,"createUserId":"1157110086460530689","link_url":null,"talkcloudRoomId":null,"feiboSyllabusTeacherId":null,"createUserName":"余校区管理员","createTime":"2019-08-16 10:31","updateTime":"2019-08-16 10:31","updateUserId":"1157110086460530689","isDelete":"0","studentNum":0,"recruitNum":50,"campusId":"1136194970676387841","classNo":"20190813SDF","photo":"","classTypeMode":2,"teacherUrl":null,"assisUrl":null,"studentUrl":null,"patrolUrl":null,"playUrl":null,"subjectId":"1135436108592795650","subjectName":"语文","courseType":3,"courseTypeName":"课时","courseMode":1,"classResourcesDtoList":null,"classOrTrialClass":2,"feiboTeacherId":null,"feiboTeacherName":null,"feiboSyllabusId":null,"feiboClassUrl":null,"time":"2019-08-16 10:35~11:35","status":4},"classOrTrialClass":2,"foreignTeacherPrice":null,"feiboSyllabusOrderNum":null,"filipinoTeacherPrice":null,"westernTeacherPrice":null,"studentList":null,"syllabus":{"classSyllabusId":"1162190144510472194","classId":"1161207327223730178","coursePackageId":"1138721993789624322","courseId":"1136201103042482177","classSyllabusName":null,"startTime":"2019-08-16 10:35","endTime":"2019-08-16 11:35","classHour":1,"teacherUserId":"1156818446604918785","assisUserId":"1156818446604918785","classroomId":"1234","attendMode":2,"orderBy":1,"courseName":"语言艺术","teacherUserName":"gcqTest","assisUserName":"gcqTest","classroomName":null,"attendModeName":"未上课","className":"水电费","classCourseCount":1,"createUserId":"1157110086460530689","link_url":null,"talkcloudRoomId":null,"feiboSyllabusTeacherId":null,"createUserName":"余校区管理员","createTime":"2019-08-16 10:31","updateTime":"2019-08-16 10:31","updateUserId":"1157110086460530689","isDelete":"0","studentNum":0,"recruitNum":50,"campusId":"1136194970676387841","classNo":"20190813SDF","photo":"","classTypeMode":2,"teacherUrl":null,"assisUrl":null,"studentUrl":null,"patrolUrl":null,"playUrl":null,"subjectId":"1135436108592795650","subjectName":"语文","courseType":3,"courseTypeName":"课时","courseMode":1,"classResourcesDtoList":null,"classOrTrialClass":2,"feiboTeacherId":null,"feiboTeacherName":null,"feiboSyllabusId":null,"feiboClassUrl":null,"time":"2019-08-16 10:35~11:35","status":4}})
	}
}

</script>

<style scoped src="@/style/module/dialog.css"></style>
<style scoped src="@/style/module/table.css"></style>
<style scoped lang="scss">
	#audition_syllabus_upload {
		.panel {
			width: 5rem;
		}
		.tab_div {
			margin: 0 0.3rem;
			height: 0.47rem;
			border-bottom: 0.01rem solid #e6e6e6;
		}
		.tab {
			float: left;
			width: 2.2rem;
			height: 0.46rem;
			line-height: 0.46rem;
			font-size: 0.16rem;
			color: #666666;
			text-align: center;
			cursor: pointer;
		}
		.tab_active {
			border-bottom: 0.02rem solid #3885f8;
		}
		.upload_div {
			height: 1.2rem;
			padding: 0 0.3rem;
			/*outline: 1px solid red;*/
		}
		.select_btn {
			width: 1.2rem;
			height: 0.36rem;
			line-height: 0.36rem;
			color: white;
			background-color: #3885F8;
			margin-top: 0.45rem;
			margin-right: 0.05rem;
			float: right;
			font-size: 0.16rem;
			text-align: center;
			border-radius: 0.08rem;
			cursor: pointer;
			user-select:none;
		}
	}
	.transparent {
		background: none;
	}
	.panel {
		position: relative;
		/*overflow: hidden;*/
		width: 9rem;
	}
	.form {
		padding: 0rem 0.3rem 0.4rem 0.3rem;
		color: #666666;
	}
	.thead td{
		font-size: 0.16rem;
		color: #999999;
	}
	.tbody tr:hover {
		background-color: #f7f9fc;
	}
	
	.span_btn {
		cursor: pointer;
		color: #3885f8;
	}
	.file_div {
		text-align: left;
		display: inline-block;
		word-wrap: break-word;
		max-width: 2.9rem;
	}
	
	.synchro_btn {
		float: right;
	    height: 0.4rem;
	    width: 1.6rem;
	    background: #3885f8;
	    border-radius: 0.1rem;
	    text-align: center;
	    color: #ffffff;
	    margin-right: 0.1rem;
	    margin-bottom: 0.15rem;
	    line-height: 0.4rem;
	    font-size: 0.16rem;
	    cursor: pointer;
	}
	.synchro_btn:hover {
		background-color: rgba(56,133,248,0.8);
	}
	
</style>